import { Popup, NavBar } from 'antd-mobile'

import CommentItem from '../CommentItem'
import CommentFooter from '../CommentFooter'
import CommentInput from '../CommentInput'
import NoneComment from '@/components/NoneComment'

import styles from './index.module.scss'
import {
  ArtComment,
  ArticleComment,
  ArticleCommentResponse,
} from '@/types/data'
import { useState, useEffect } from 'react'
import http from '@/utils/http'

type Props = {
  onClose: () => void
  // 评论项类型
  commentItem: ArtComment
  // 通知父组件修改评论数据的回调函数
  // onReplyThumbUp: (com_id: string, is_liking: boolean) => void
  // 文章id
  // articleId: string
}

const Reply = ({
  onClose,
  commentItem /* onReplyThumbUp, articleId*/,
}: Props) => {
  // 原始评论项的状态
  const [comment, setComment] = useState(commentItem)
  // 控制回复文本框弹出层的展示和隐藏
  const [showPopup, setShowPopup] = useState(false)
  // 评论项的回复列表状态
  const [reply, setReply] = useState<ArticleComment>({
    // 注意：为了防止第一次进入时，访问 reply.results.length 不报错，需要在此处给它设置默认值为：[]
    results: [] as ArtComment[],
    last_id: null,
    end_id: null,
    total_count: 0,
  })
  //拿回复数据
  useEffect(() => {
    const loadData = async () => {
      const res = await http.get<ArticleCommentResponse>('/comments', {
        params: {
          type: 'c',
          source: comment.com_id,
        },
      })

      setReply(res.data.data)
    }
    loadData()
  }, [comment.com_id])

  return (
    <div className={styles.root}>
      <div className="reply-wrapper">
        <NavBar className="transparent-navbar" onBack={onClose}>
          {0}条回复
        </NavBar>

        {/* 要回复的评论 */}
        <div className="origin-comment">
          <CommentItem type="origin" />
        </div>

        <div className="reply-list">
          <div className="reply-header">全部回复</div>
          {true ? <CommentItem type="reply" /> : <NoneComment />}
        </div>

        {/* <CommentFooter placeholder="去评论" type="reply" /> */}
      </div>

      {/* 回复文本框对应的抽屉 */}

      <Popup className="reply-popup" position="bottom" visible={false}>
        {/* <CommentInput onClose={onReplyPopupHide} /> */}
      </Popup>
    </div>
  )
}

export default Reply
